<route lang="json5" type="page">
{
    layout: "default",
    style: {
        navigationBarTitleText: "文化遗产",
    },
}
</route>

<template>
    <view class="m-base-box m-heritage">
        <view>
            <scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scroll-Y" @scrolltolower="loadMore">
                <view v-for="(item, index) in list" :key="item.id" class="m-heritage-item pb-[20rpx]">
                    <wd-card>
                        <view class="flex items-center gap-2 py-4" @click="detail(item.id)">
                            <view>
                                <wd-img :src="item?.image?.url" mode="widthFix" width="150rpx" height="150rpx">
                                    <template #error>
                                        <view
                                            class="w-[100%] flex items-center justify-center h-[100%] bg-coolgray-100"
                                        >
                                            加载失败
                                        </view>
                                    </template>
                                    <template #loading>
                                        <view class="flex justify-center items-center w-[100%] h-[100%]">
                                            <wd-loading />
                                        </view>
                                    </template>
                                </wd-img>
                            </view>
                            <view class="flex flex-col justify-center items-start gap-1 px-[10rpx] py-[10rpx]">
                                <wd-text :text="item?.title" bold size="14px" color="#000"></wd-text>

                                <wd-tag type="primary" mark size="12px">{{ item?.category }}</wd-tag>
                            </view>
                        </view>
                        <!-- <template #footer>
                            <wd-button size="small" plain>查看详情</wd-button>
                        </template> -->
                    </wd-card>
                </view>
                <wd-loadmore custom-class="loadmore" :state="loading" :finished-text="finishedText" />
            </scroll-view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { pageUsingGet1 } from "@/service/app";
const scrollTop = ref(0);
function loadMore() {
    if (noLoading.value) return; // 如果数据全部加载完成了，就不再加载更多
    queryParams.value.current += 1;
    getList();
    console.log("加载更多");
}
const queryParams = ref({
    current: 1,
    size: 10,
});
const list = ref<any>([]);
const total = ref(0);
const loading = ref<any>("loading");
const finishedText = ref("加载完成");
const noLoading = ref(false); // 数据是否全部加载完成了
function getList() {
    loading.value = "loading";
    pageUsingGet1({ params: queryParams.value }).then((res) => {
        loading.value = "finished";
        total.value = res?.data?.total;
        if (res?.data?.records && res?.data?.records.length > 0) {
            list.value = list.value.concat(res?.data?.records);
        }
        if (total.value == list.value.length) {
            finishedText.value = "没有更多数据了";
            noLoading.value = true;
        }
    });
}
function detail(id: string) {
    uni.navigateTo({ url: `/pages/heritage/detail?id=${id}` });
}
onLoad(() => {
    getList();
});
</script>

<style lang="scss" scoped>
.m-heritage {
    padding: 40rpx 0;
}
</style>
